<template>
	<view style="background-color: #f9fafe; height: 2300rpx;">
		<view  class="topSticky">
		</view>
		<view class="userInfo flex"> 
			<view class="userLogo">
				<u--image width="150rpx" height="150rpx" shape="circle" :src="user.avatar"></u--image>
			</view>
			<view class="mobile" v-if="user.nickname">{{user.nickname}}</view>
			<view class="mobile" v-else>
				<button type="primary" @click="goLogin">立即登录</button>
			</view>
		</view>
		<view class="content">
			<view class="flex userOrderWall">
				<view class="order" @click="myOrder">
					<view><u-icon size="60" name="order"></u-icon></view>
					<view>我的订单</view>
				</view>
				<view class="line"></view>
				<view class="wallet" @click="wallet">
					<view><u-icon size="60" name="red-packet"></u-icon></view>
					<view>钱包</view>
				</view>
			</view>
			<view style="margin: 20rpx 0 10rpx 0; border-radius: 20rpx;">
				<u--image radius="5" mode='scaleToFill' width="100%" height="200rpx" :showLoading="true" :src="src" @click="distribution"></u--image>
			</view>
			<view class="utils">
				<view class="myUtils">我的工具</view>
				
				<view >
					<u-grid
							:border="false"
							@click="gclick"
							
					>
						<u-grid-item
								v-for="(baseListItem,baseListIndex) in baseList"
								:key="baseListIndex"
						>
							<view v-if="baseListIndex == 4" >
								<u-icon
										:customStyle="{paddingTop:20+'rpx',marginLeft:35+'rpx'}"
										:name="baseListItem.name"
										:size="35"
								>
								
								</u-icon>
								<text class="grid-text">{{baseListItem.title}}</text>
							</view>
							<view v-else-if="baseListIndex != 5" >
								<u-icon
										:customStyle="{paddingTop:20+'rpx',marginLeft:20+'rpx'}"
										:name="baseListItem.name"
										:size="35"
								>
								
								</u-icon>
								<text class="grid-text">{{baseListItem.title}}</text>
							</view>
							<view v-else>
								<!-- #ifdef MP-WEIXIN -->
								<button open-type="contact" class="contact">
									<u-icon
											:customStyle="{paddingTop:25+'rpx',marginLeft:20+'rpx',marginBottom:-20+'rpx'}"
											:name="baseListItem.name"
											:size="35"
									>
									
									</u-icon>
									<text class="grid-text">{{baseListItem.title}}</text>
								</button>
								<!-- #endif -->
								<!-- #ifndef MP-WEIXIN -->
								<u-icon
										:customStyle="{paddingTop:20+'rpx',marginLeft:20+'rpx'}"
										:name="baseListItem.name"
										:size="35"
										@click="contactCustomer"
								>
								
								</u-icon>
								<text class="grid-text">{{baseListItem.title}}</text>
								<!-- #endif -->
							</view>
							
						</u-grid-item>
					</u-grid>
					<u-toast ref="uToast" />
				</view>
			</view>
			<view class="recommendView">
				<u-divider
						customStyle="width:400rpx; margin-left:20%;"
				        text="为您推荐"
				        textColor="#61c2a3"
				        lineColor="#61c2a3"
				></u-divider>
				<view class="recommend" v-if="recommendGoods.id">
					<goodsList :info="recommendGoods"></goodsList>
				</view>
				<u-divider
				customStyle="width:400rpx; margin-left:20%;"
				        text="没有更多了"
				        textColor="#5e5f61"
				        lineColor="#e3e4e6"
				></u-divider>
			</view>
		</view>
		<buttonNav :active="active"></buttonNav>
		<u-popup :show="contactCustomerDom" mode="center"  :closeOnClickOverlay="true" @close="contactCustomerClose" >
			<view>
				<u--image :src="contactCustomerSrc"></u--image>
			</view>
		</u-popup>
	</view>
</template>

<script>
	
	import http from "@/apis/http.js";
	import buttonNav from '@/components/bottomNav.vue';
	import goodsList from '@/components/goodsList.vue'
	import base from '@/config/base.js'
	export default {
		components:{
			buttonNav,
			goodsList
		},
		data() {
			return {
				systemInfo : {},
				contactCustomerDom:false,
				src: base.baseUrl+'assets/img/web/cardFee.png',
				contactCustomerSrc: '',
				active:3,
				user:{},
				baseList: [{
					name: 'coupon',
					title: '激活卡密',
					url:'/pages/vipCard/activeCard'
					},
					{
						name: 'map',
						title: '出行信息',
						url:'/pages/exchange/exchange'
					},
					{
						name: 'calendar',
						title: '卡包中心',
						url:'/pages/vipCard/vipCard'
					},
					{
						name: 'man-add-fill',
						title: '分销中心',
						url:'/pages/distribution/distribution'
					},
					{
						name: 'plus-circle',
						title: '代理商中心',
						url:'/pages/agent/agent',
					},
					{
						name: 'kefu-ermai',
						title: '客服中心'
						
					},
				],
				recommendGoods:{},
			}
		},
		methods: {
			getRecommendGoods(){
				http.POST('goods/recommendGoods').then(res=>{
					this.recommendGoods = res.data;
				})
			},
			gclick(index){
				switch(index){
					case 5:
					
					break;
					default:
					uni.navigateTo({
						url:this.baseList[index]['url']
					})
					break;
				}
			},
			wallet(){
				uni.navigateTo({
					url:'/pages/my/wallet'
				})
			},
			goLogin(){
				uni.reLaunch({
					url:'/pages/my/login'
				})
			},
			myOrder(){
				uni.reLaunch({
					url:'/pages/order/order'
				})
			},
			distribution(){
				uni.navigateTo({
					url:'/pages/distribution/distribution'
				})
			},
			contactCustomer(){
				this.contactCustomerDom = true;
				this.contactCustomerSrc = base.baseUrl+ this.systemInfo.customerLogo
			},
			contactCustomerClose(){
				this.contactCustomerDom = false;
			},
			getSystemInfo (){
				http.POST('index/systemInfo').then(res=>{
					this.systemInfo = res.data
				})
			},
		},
		onLoad() {
			this.getRecommendGoods()
			this.getSystemInfo();
			this.user = uni.getStorageSync('userinfo');
			if(!this.user){
			 	uni.reLaunch({
					url:'/pages/my/login'
				}) 
			}
		}
	}
</script>

<style>
	.grid-text {
		font-size: 25rpx;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
	.flex { display: flex;}
	.topSticky{
		position: sticky;  top:0; z-index: 1000;
		background-color: #52bbaa;
		padding: 130rpx 0 8rpx 35rpx;
	} 
	.content {
		position: absolute;
		width: 90%;
		top: 370rpx;
		left: 40rpx;
		background-color: #f9fafe;
		border-radius: 20rpx;
	}
	
	.userInfo { background-color: #52bbaa; padding: 30rpx 30rpx 150rpx 30rpx; margin-top: -1px; display: flex; align-items: center; font-size: 40rpx; color: #fff;}
	.userInfo .mobile{ margin-left: 20rpx;}
	.userOrderWall { 
		font-weight: bold; 
		border-radius: 20rpx; 
		font-size: 30rpx;
		height: 200rpx; 
		background-color: #fff; 
		padding: 20rpx 50rpx; text-align: center; 
		justify-content: space-around;
		}
	.line { width: 1rpx; background-color: #eee; height: 100rpx; align-self: center;}
	.utils { margin-top: 30rpx; padding-bottom:10rpx; background-color: #fff;}
	.myUtils { margin-bottom: 5rpx; font-weight: bold; padding: 30rpx;}
	.recommendView { margin-top: 50rpx; margin-bottom: 100rpx;}
	.grid-text { color: #1f1f1f;}
	button::after,.contact{
		border:none !important;
		background-color: transparent !important;
	}
</style>
